<template>
  <v-dialog
    v-model="dialog"
    max-width="500px"
    persistent
  >
    <v-card>
      <v-card-title>
        <span class="text-h5">
          {{ isEditing ? '编辑清单' : '创建清单' }}
        </span>
      </v-card-title>

      <v-card-text>
        <v-container>
          <v-row>
            <v-col cols="12">
              <v-text-field
                v-model="listData.name"
                label="清单名称"
                :rules="nameRules"
                required
                variant="outlined"
                prepend-inner-icon="mdi-format-title"
              />
            </v-col>

            <v-col cols="12">
              <v-textarea
                v-model="listData.description"
                label="描述（可选）"
                variant="outlined"
                rows="3"
                prepend-inner-icon="mdi-text"
              />
            </v-col>

            <v-col cols="12">
              <v-select
                v-model="listData.icon"
                :items="iconOptions"
                label="图标"
                variant="outlined"
                prepend-inner-icon="mdi-palette"
              >
                <template #selection="{ item }">
                  <v-icon :icon="item.value" class="me-2" />
                  {{ item.title }}
                </template>
                <template #item="{ props, item }">
                  <v-list-item v-bind="props">
                    <template #prepend>
                      <v-icon :icon="item.raw.value" />
                    </template>
                  </v-list-item>
                </template>
              </v-select>
            </v-col>

            <v-col cols="12">
              <v-select
                v-model="listData.color"
                :items="colorOptions"
                label="颜色"
                variant="outlined"
                prepend-inner-icon="mdi-palette"
              >
                <template #selection="{ item }">
                  <v-chip
                    :color="item.value"
                    size="small"
                    class="me-2"
                  />
                  {{ item.title }}
                </template>
                <template #item="{ props, item }">
                  <v-list-item v-bind="props">
                    <template #prepend>
                      <v-chip
                        :color="item.raw.value"
                        size="small"
                      />
                    </template>
                  </v-list-item>
                </template>
              </v-select>
            </v-col>

            <v-col cols="12">
              <v-switch
                v-model="listData.isDefault"
                label="设为默认清单"
                color="primary"
                hide-details
              />
            </v-col>
          </v-row>
        </v-container>
      </v-card-text>

      <v-card-actions>
        <v-spacer />
        <v-btn
          color="grey-darken-1"
          variant="text"
          @click="closeDialog"
        >
          取消
        </v-btn>
        <v-btn
          color="primary"
          variant="text"
          :disabled="!isFormValid"
          @click="saveList"
        >
          {{ isEditing ? '更新' : '创建' }}
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import type { CustomList } from '@/types/list'

interface Props {
  modelValue: boolean
  list?: CustomList | null
}

interface Emits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'save', list: Partial<CustomList>): void
}

const props = withDefaults(defineProps<Props>(), {
  list: null
})

const emit = defineEmits<Emits>()

const dialog = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const isEditing = computed(() => !!props.list)

const listData = ref<Partial<CustomList>>({
  name: '',
  description: '',
  icon: 'mdi-format-list-bulleted',
  color: 'blue',
  isDefault: false
})

const nameRules = [
  (v: string) => !!v || '清单名称不能为空',
  (v: string) => v.length <= 50 || '清单名称不能超过50个字符'
]

const iconOptions = [
  { title: '列表', value: 'mdi-format-list-bulleted' },
  { title: '星星', value: 'mdi-star' },
  { title: '心形', value: 'mdi-heart' },
  { title: '工作', value: 'mdi-briefcase' },
  { title: '家庭', value: 'mdi-home' },
  { title: '购物', value: 'mdi-cart' },
  { title: '学习', value: 'mdi-school' },
  { title: '健康', value: 'mdi-heart-pulse' },
  { title: '旅行', value: 'mdi-airplane' },
  { title: '目标', value: 'mdi-target' }
]

const colorOptions = [
  { title: '蓝色', value: 'blue' },
  { title: '绿色', value: 'green' },
  { title: '红色', value: 'red' },
  { title: '紫色', value: 'purple' },
  { title: '橙色', value: 'orange' },
  { title: '青色', value: 'teal' },
  { title: '粉色', value: 'pink' },
  { title: '靛蓝', value: 'indigo' },
  { title: '棕色', value: 'brown' },
  { title: '灰色', value: 'grey' }
]

const isFormValid = computed(() => {
  return listData.value.name && 
         listData.value.name.length > 0 && 
         listData.value.name.length <= 50
})

const resetForm = () => {
  listData.value = {
    name: '',
    description: '',
    icon: 'mdi-format-list-bulleted',
    color: 'blue',
    isDefault: false
  }
}

const closeDialog = () => {
  dialog.value = false
  resetForm()
}

const saveList = () => {
  if (!isFormValid.value) return
  
  emit('save', { ...listData.value })
  closeDialog()
}

// 监听 props.list 变化，更新表单数据
watch(
  () => props.list,
  (newList) => {
    if (newList) {
      listData.value = {
        name: newList.name,
        description: newList.description || '',
        icon: newList.icon,
        color: newList.color,
        isDefault: newList.isDefault || false
      }
    } else {
      resetForm()
    }
  },
  { immediate: true }
)
</script>

<style scoped>
.v-card {
  border-radius: 12px;
}

.v-chip {
  width: 20px;
  height: 20px;
}
</style>